@page "/docio/nested-mail-merge"
@inject Microsoft.JSInterop.IJSRuntime JS
@using System.IO
@using Syncfusion.Blazor.Buttons
@using BlazorDemos.Data.FileFormats.DocIO
@inherits SampleBaseComponent;

<SampleDescription>
   <p style="font-size:16px"> This sample demonstrates how to perform Mail merge for nested groups in Word document using Essential DocIO.</p> 
</SampleDescription>
<ActionDescription>
 <p style="font-size:16px">DocIO supports to perform mail merge between the nested groups in the Word document, to generate report with hierarchical data.</p>
<p><ul style="font-size:16px"><li>You can create advanced reports by dynamically repeating a region of the document and by nesting mail merge region inside each other to populate hierarchical data.</li><li>You can define relation between the data tables explicitly or directly use relational data for performing nested mail merge.</li></ul></p><p style="font-size:16px">More information about the nested Mail merge can be found in this <a href="https://help.syncfusion.com/file-formats/docio/working-with-mailmerge">documentation</a> section.</p>  
</ActionDescription>

<div class="control-section">
    <p style="font-size:16px">Click the button to view the generated Word document. Please note that Microsoft Word Viewer or Microsoft Word is required to view the resultant Word document.</p>
    <table>
        <tr>
            <td colspan="3">
                <h5 class="row" style="font-size:16px">Nested Mail merge Template :</h5>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <table>
                    <tr>
                        <td>
                            <div class="col-xs-12 col-sm-12 col-lg-1 col-md-6" style="margin-right: 63px">
                                <SfRadioButton Label="Report" Name="Report" @bind-Checked="@Group1" Value="Report" TChecked="string"></SfRadioButton>
                            </div>
                        </td>
                        <td colspan="2">
                            <div class="col-xs-12 col-sm-12 col-lg-1 col-md-6">
                                <SfRadioButton Label="Letter" Name="Letter" @bind-Checked="@Group1" Value="Letter" TChecked="string"></SfRadioButton>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <h5 class="row" style="font-size:16px">Mail merge Data :</h5>
            </td>
        </tr>
        <tr>
            <td>
                <div class="col-xs-12 col-sm-12 col-lg-1 col-md-6" style="width:auto">
                    <SfRadioButton Label="Implicit Relation" Name="Implicit" @bind-Checked="@Group2" Value="Implicit" TChecked="string"></SfRadioButton>
                </div>
            </td>
            <td colspan="2">
                <div class="col-xs-12 col-sm-12 col-lg-1 col-md-6" style="width:auto">
                    <SfRadioButton Label="Explicit Relation" Name="Explicit" @bind-Checked="@Group2" Value="Explicit" TChecked="string"></SfRadioButton>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <h5 class="row" style="font-size:16px">Save As:</h5>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <table>
                    <tr>
                        <td>
                            <div class="col-xs-12 col-sm-12 col-lg-1 col-md-6">
                                <SfRadioButton Label="DOC" Name="DOC" Value=@("DOC") @bind-Checked="@documentType"></SfRadioButton>
                            </div>
                        </td>
                        <td>
                            <div class="col-xs-12 col-sm-12 col-lg-1 col-md-6">
                                <SfRadioButton Label="DOCX" Name="DOCX" Value=@("DOCX") @bind-Checked="@documentType"></SfRadioButton>
                            </div>
                        </td>
                        <td>
                            <div class="col-xs-12 col-sm-12 col-lg-1 col-md-6">
                                <SfRadioButton Label="WordML" Name="WordML" Value=@("WordML") @bind-Checked="@documentType"></SfRadioButton>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div id="button-control">
                    <div class="row">
                        <div>
                            <SfButton @onclick="ViewTemplate">View Template</SfButton>&nbsp;
                            <SfButton @onclick="GenerateDocument">Generate Document</SfButton>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
<style>
    .control-section .row {
        margin: 10px 0;
    }
</style>

@code {
    MemoryStream documentStream;
    string documentType = "DOCX";
    string Group1 = "Letter";
    string Group2 = "Implicit";
    /// <summary>
    /// Create and download the simple Word document
    /// </summary>
    public async Task GenerateDocument(MouseEventArgs args)
    {
        NestedMailMergeService service = new NestedMailMergeService();
        documentStream = service.NestedMailMerge(Group1, Group2, documentType, "Generate Document");
        if (documentType == "DOC")
            await JS.SaveAs("Sample.doc", documentStream.ToArray());
        else if (documentType == "WordML")
            await JS.SaveAs("Sample.xml", documentStream.ToArray());
        else
            await JS.SaveAs("Sample.docx", documentStream.ToArray());
    }
    /// <summary>
    /// Create and download the template Word document
    /// </summary>
    public async Task ViewTemplate(MouseEventArgs args)
    {
        NestedMailMergeService service = new NestedMailMergeService();
        documentStream = service.NestedMailMerge(Group1, Group2, documentType, "View Template");
        string outputFileName = "Template_Letter.doc";
        if (Group1 == "Report")
            outputFileName = "Template_Report.doc";
        await JS.SaveAs(outputFileName, documentStream.ToArray());
    }
}